<template>
  <div>
    <el-form :inline="true" :model="formData" label-width="100px" label-position="right" >
      <el-form-item label="合伙人姓名">
        <el-input @change="searchChange" placeholder="合伙人姓名" v-model="formData.partnerName" size="small" clearable></el-input>
      </el-form-item>
      <el-form-item label="合伙人手机">
        <el-input @change="searchChange" placeholder="手机号" v-model="formData.partnerMobile" size="small" clearable></el-input>
      </el-form-item>
      <el-form-item label="打款状态">
        <el-select size="small" v-model="formData.payStatus" @change="searchChange" clearable>
          <el-option v-for="(item,index) in payStatusOptions" :key="index" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="审核状态">
        <el-select size="small" v-model="formData.status" @change="searchChange" clearable>
          <el-option v-for="(item,index) in statusOptions" :key="index" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="提现日期">
        <el-date-picker
          v-model="formData.createDate"
          @change="searchChange"
          size="small"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期" clearable>
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click.stop="searchChange">搜索</el-button>
        <el-button type="primary" size="small" @click.stop="exportExcel">导出</el-button>
        <el-button type="primary" size="small" @click.stop="audit('',2)">审核</el-button>
      </el-form-item>
    </el-form>
    <div class="sumary-list">
      <div>提现总条数：{{cashOutCount}}</div>
      <div>提现总额：{{cashOutMoney}}</div>
    </div>
    <avue-crud ref="crud"
               :page="page"
               :data="dataList"
               :option="tableOption"
               :table-loading="dataListLoading"
               @selection-change="selectionChange"
               @size-change="sizeChange"
               @current-change="currentChange">
      <template slot-scope="scope" slot="basicsinfo">
        <div><span>运营商：{{scope.row.merchantName}}</span></div>
        <div><span>姓名：{{scope.row.partnerName}}</span></div>
        <div><span>手机号：{{scope.row.partnerMobile}}</span></div>
      </template>
      <template slot-scope="scope" slot="paymentinfo">
        <div v-if="scope.row.payMethod == 1">
          <div><span>付款商户名称：{{scope.row.payMerName}}</span></div>
          <div><span>付款商户号：{{scope.row.payMerId}}</span></div>
        </div>
        <div id="box" v-if="scope.row.payMethod == 0">

        </div>
      </template>
      <template slot-scope="scope" slot="withdrawal">
        <div v-if="scope.row.payMethod == 0">
          <div><span>提现方式：线下转账</span></div>
          <div><span>提现银行：{{scope.row.bank}}</span></div>
          <div><span>银行卡号：{{scope.row.bankCode}}</span></div>
          <div><span>持卡人姓名：{{scope.row.cardUserName}}</span></div>
        </div>
        <div v-if="scope.row.payMethod == 1">
          <div><span>提现方式：乐刷转账</span></div>
          <div><span>收款商户名称：{{scope.row.revMerName}}</span></div>
          <div><span>收款商户账号：{{scope.row.revMerId}}</span></div>
          <!-- <div><span>openId：{{scope.row.wxOpenId}}</span></div> -->
<!--          <div v-if="scope.row.wxUser" style="display:flex;align-items: center;">微信头像：<el-avatar size="small" :src="scope.row.wxUser.avatarUrl"></el-avatar></div>-->
        </div>
      </template>
      <template slot-scope="scope" slot="money">
        <div><el-tag size="small">提现总金额 ￥{{scope.row.totalMoney}}</el-tag></div>
        <div><el-tag size="small">到账金额 ￥{{scope.row.money}}</el-tag></div>
        <div><el-tag size="small">手续费 ￥{{scope.row.serviceMoney}}</el-tag></div>
      </template>
      <template slot-scope="scope" slot="toexamine">
        <div><span>审核人：{{scope.row.auditor}}</span></div>
        <div><span>审核时间：{{scope.row.auditDate}}</span></div>
        <div><span>审核状态：{{scope.row.status==0?'审核中':scope.row.status==1?'审核驳回':'审核通过'}}</span></div>
      </template>
      <template slot-scope="scope" slot="Payment">
        <div><span>打款人：{{scope.row.payer}}</span></div>
        <div><span>打款时间：{{scope.row.payDate}}</span></div>
        <div><span>打款状态：{{scope.row.payStatusDesc}}</span></div>
        <div><span>转账编号：{{scope.row.thirdId}}</span></div>
        <div><span>打款消息：{{scope.row.payMsg}}</span></div>
      </template>
      <template slot-scope="scope"
                slot="menu">
        <div class="menu-list" v-if="scope.row.status === 0">
          <el-button type="primary"
                     size="small"
                     @click="audit(scope.row.id,1)">审核</el-button>
        </div>
        <div class="menu-list" v-if="scope.row.status === 2&&scope.row.payStatus==0">
          <el-button type="primary"
                     size="small"
                     @click="updatePayStatusup(scope.row)">标记打款</el-button>
        </div>
        <div class="menu-list" v-if="scope.row.payStatus!==1&&scope.row.status!==0&&scope.row.status!==1">
          <el-button type="primary"
                     size="small"
                     @click="resetPayStatus(scope.row.id)">重置打款</el-button>
        </div>
      </template>
    </avue-crud>
    <audit-withdraw ref="auditWithdraw" @refreshDataList="refreshDataList"></audit-withdraw>

    <el-dialog title="提示" top="30vh" :visible.sync="Markpaymentshow" @close="close">
      <div>
        <el-radio v-model="radio" :label="0">线下转账</el-radio>
        <el-radio v-model="radio" :label="1">乐刷转账</el-radio>
      </div>
      <div v-if="markdata.payMethod == 1 && radio == 0" style="color:red;margin-top:10px;">
        您已修改为线下转账，需要填写备注，并通过线下转账方式支付给提现用户！
      </div>
      <div v-if="radio == 1" style="color:red;margin-top:10px;">
        此操作将通过乐刷转账方式直接付款给提现用户，请确认用户信息及金额后操作！
      </div>
      <div v-if="markdata.payMethod == 1 && radio == 0" style="display:flex;margin-top:10px;">
        <div>备注：</div>
        <el-input
          style="flex:1;"
          type="textarea"
          :rows="2"
          placeholder="请输入打款备注"
          v-model="remark">
        </el-input>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closePayStatus">取 消</el-button>
        <el-button type="primary" @click="updatePayStatus">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { tableOption } from '@/crud/partner/withdrawList'
  import auditWithdraw from  './auditWithdraw'
  import { exportExcelCb } from '@/utils/index'

  export default {
    name: 'withdrawList',
    components:{
      auditWithdraw
    },
    data(){
      return {
        Markpaymentshow: false,
        cashOutCount:0,
        cashOutMoney:0,
        tableOption:tableOption,
        dataListLoading:true,
        dataListSelections:[],
        formData: {
          partnerName: '',
          partnerMobile: '',
          createDate: '',
          payStatus: '',
          status:''
        },
        dataList:[],
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10 // 每页显示多少条
        },
        payStatusOptions:[
          {
            label:'全部',
            value:''
          },
          {
            label:'未打款',
            value:'0'
          },
          {
            label:'已打款',
            value:'1'
          }
        ],
        statusOptions:[
          {
            label:'全部',
            value:''
          },
          {
            label:'审核中',
            value:'0'
          },
          {
            label:'提现驳回',
            value:'1'
          },
          {
            label:'提现通过',
            value:'2'
          }
        ],

        remark: '',
        radio: 0,
        markdata: {}
      }
    },
    mounted(){
      this.getDataList()
    },
    methods:{

      getDataList(page,params){
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/v1/merchant/partner/cash/out/list'),
          method: 'get',
          params: this.$http.adornParams(
            Object.assign(
              {
                current: page == null ? this.page.currentPage : page.currentPage,
                size: page == null ? this.page.pageSize : page.pageSize
              },
              params
            )
          )
        }).then(({ data }) => {
          this.cashOutCount=data.data.cashOutCount
          this.cashOutMoney=data.data.cashOutMoney
          this.dataList = data.data.cashOutIPage.records
          this.page.total = data.data.cashOutIPage.total
          this.dataListLoading = false
        })
      },

      searchChange(){
        if(this.formData.createDate&&this.formData.createDate.length > 0) {
          this.formData.startTime = this.formData.createDate[0]
          this.formData.endTime = this.formData.createDate[1]
        }
        else {
          this.formData.startTime = ''
          this.formData.endTime = ''
        }
        this.page.currentPage=1
        this.getDataList(this.page, this.formData)
      },
      currentChange(val){
        this.page.currentPage=val
        this.getDataList(this.page,this.formData)
      },
      sizeChange(val){
        this.page.pageSize=val
        this.getDataList(this.page,this.formData)
      },
      selectionChange(val){
        this.dataListSelections = val
      },
      refreshDataList(){
        this.getDataList(this.page,this.formData)
      },
      /*审核*/
      audit(id,type){
        if(type==1){
          this.$refs['auditWithdraw'].init([id])
        }
        else {
          if (this.dataListSelections.length == 0) {
            this.$message.error('请选择数据')
            return
          }
          let ids=[]
          for(var i=0;i<this.dataListSelections.length;i++){
            var item=this.dataListSelections[i]
            ids.push(item.id)
          }
          this.$refs['auditWithdraw'].init(ids)
        }
      },
      // 标记打款弹框
      updatePayStatusup(id){
        this.markdata = id
        console.log(id.payMethod)
        this.radio = id.payMethod
        this.Markpaymentshow = true
      },
      resetPayStatus(id){
        this.$confirm(`确定进行重置操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/v1/merchant/partner/reset/payStatus'),
            method: 'POST',
            data: this.$http.adornData({
              id: id
            })
          }).then(({ data }) => {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getDataList(this.page,this.formData)
              }
            })
          })
        })
          .catch(() => { })

      },
      closePayStatus() {
        this.Markpaymentshow = false
        this.getDataList(this.page,this.formData)
      },
      // 标记打款确认
      updatePayStatus () {
        if(this.markdata.payMethod == 1 && this.radio == 0){
          if(!this.remark){
            this.$message({
              message: '请先填写备注!',
              type: 'warning'
            });
            return
          }
        }
        this.$http({
          url: this.$http.adornUrl('/v1/merchant/partner/cash/out/pay'),
          method: 'POST',
          data: this.$http.adornData({
            id: this.markdata.id,
            payStatus: 1,
            payMethod: this.radio,
            remark: this.remark
          })
        }).then(({ data }) => {
          console.log("11111")
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.Markpaymentshow = false
              this.getDataList(this.page,this.formData)
            }
          })
        }).catch(() => { })
      },
      close(){
        this.remark = ''
      },
      exportExcel(){
        this.$http({
          url:this.$http.adornUrl('/v1/merchant/partner/cash/out/export'),
          method:'get',
          params:this.$http.adornParams(this.formData),
          responseType:'blob'
        }).then(({data})=>{
          console.log(data)
          exportExcelCb(data,'提现汇总列表.xls')
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .sumary-list{
    display: flex;
    justify-content: flex-start;
    margin-bottom: 15px;
    div{
      height: 30px;
      padding: 0px 12px;
      line-height: 30px;
      border:solid 1px #009FF1;
      border-radius: 15px;
      margin-right: 10px;
    }
    div:hover{
      color: white;
      background-color: #009FF1;
    }
  }
  .menu-list{
    margin-bottom: 10px;
  }

  #box:before{
    position: absolute;
    content: '';
    height: 100%;
    width: 100%;
    background: linear-gradient(to top right,white,white 49%, #e4e4e4 , white 51%,white);
    left: 0;
    top: 0;
  }
</style>
